Google Fontsを利用して、Angular6で作ったサイトのフォントを変えてみる

Google Fontsを利用して、Angular6で作ったサイトのフォントを変えてみる

どうも!大阪オフィスの西村祐二です。フォントは見る側に与える印象を変えたりとても重要な要素です。今回、Google Fontsで提供されているwebフォントを使って、Angular6で作ったサイトのフォントを変更してみました。
Clock Icon2018.06.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

どうも!大阪オフィスの西村祐二です。

今回はGoogle Fontsで提供されているwebフォントを使って、Angular6で作ったサイトのフォントを変更してみたいと思います。

https://fonts.google.com/

ちなみに、Google FontsはGoogle が提供している Web Fonts のサイトです。無料で利用することができます。

日本語のフォントも利用可能

数は少ないですが、日本語フォントも利用できます。もちろん無料です。

https://googlefonts.github.io/japanese/

Angular6で作ったサイトの日本語フォントをかえてみる

環境

  • Angular CLI: 6.0.8
  • Node: 9.6.1
  • OS: darwin x64
  • Angular: 6.0.4

利用フォント

フォントが変更されているか確認しやすいように、「ニコモジ Nico Moji」というフォントを適用してみたいと思います。

サイト作成

Angular CLIインストール

$ npm install -g@latest

雛形作成

$ ng new web-font
$ cd web-font

デフォルトのページを下記に編集

$ vi src/app/app.component.html

<h1>まいど!おおきに!</h1>

ローカルサーバを起動して確認

$ ng serve --open

自動的にページが開き、下記のようになるかと思います。

Webフォントの設定

サイトからHTMLとCSSをコピーしておきます。

https://googlefonts.github.io/japanese/#nicomoji

サイト全体に設定できるsrc/index.htmlのheadタグ内にコピーした値を追加します。

$ vi src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tutorial</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />
</head>
<body>
  <app-root></app-root>
</body>
</html>

サイト全体のスタイルを設定できるsrc/styles.cssのコピーした値を追加します。スコープはhtml,bodyに変更しています。

$ vi src/styles.css
/* You can add global styles to this file, and also import other style files */
html, body {
  font-family: "Nico Moji";
}

これで設定は完了です。ブラウザに戻ると、フォントが適用されています。

さいごに

いかがだったでしょうか。

Google Fontsで提供されているwebフォントを使って、Angular6で作ったサイトのフォントを変更してみました。

誰かの参考になれば幸いです。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.